<template>
    <view>
        <!-- tabss -->
        <u-tabs ref="tabs" :list="list" :current="current" @change="change" :is-scroll="scrollable"
            :active-color="activeStyle" :inactive-color="inactiveStyle" :bg-color="bac" :bar-style="barStyle"></u-tabs>

    </view>
</template>
<script>
export default {
    name: 'uViewTabs',
    props: {
        list: {
            type: Array,
        },
        // 当前选中索引
        current: {
            type: [Number, String],
            default: 0,
        },
        // 菜单是否可滚动
        scrollable: {
            type: Boolean,
            default: false,
        },
        // 选中样式
        activeStyle: {
            type: String,
            default: '#0089FF'
        },
        // 未选中样式
        inactiveStyle: {
            type: String,
            default: '#999999'
        },
        bac: {
            type: String,
            default: '#f8f8f8'
        },
        // 滑块样式
        barStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {

        }
    },

    methods: {
        change(index) {
            this.$emit('change', index);
        }
    }
}
</script>
<style lang="scss" scoped>
// .u-tabs {
//     background-color: #fff;
// }
</style>